<style scoped>
.layout {
  background: #f5f7f9;
  color: #fff;
  position: relative;
  overflow: hidden;
}


.menu-icon {
  transition: all 0.3s;
}
.rotate-icon {
  transform: rotate(-90deg);
}
.menu-item span {
  display: inline-block;
  overflow: hidden;
  width: 130px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width 0.2s ease 0.2s;
}
.menu-item i {
  transform: translateX(0px);
  transition: font-size 0.2s ease, transform 0.2s ease;
  vertical-align: middle;
  font-size: 16px;
}
.collapsed-menu span {
  width: 0px;
  transition: width 0.2s ease;
}
.collapsed-menu i {
  transform: translateX(5px);
  transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
  vertical-align: middle;
  font-size: 22px;
}
.ivu-menu-item {
  padding: 14px 24px;
  font-size: 16px;
}
.ivu-layout-header {
  padding: 0 20px;
}
.ivu-layout-content {
  background: none;
}
.layout,
.ivu-layout,
.ivu-layout-sider {
  height: 100%;
}
.ivu-layout-content {
  background: none !important;
}
</style>
<template>
  <div class="layout">
    <Layout>
      <Sider
        width="215"
        ref="side1"
        hide-trigger
        collapsible
        :collapsed-width="78"
        v-model="isCollapsed"
      >
        <div>
          <img src="../../assets/img/logo.png" alt srcset>
        </div>
        <Menu
          active-name="1"
          theme="dark"
          width="auto"
          :class="menuitemClasses"
          @on-select="menuChange"
        >
          <MenuItem name="1" to="/VariantLocus">
            <Icon type="md-laptop"></Icon>
            <span>肿瘤变异位点查询</span>
          </MenuItem>
          <MenuItem name="2" to="/VariantLocusMutationData">
            <Icon type="md-podium"></Icon>
            <span>检测变异位点数据</span>
          </MenuItem>
          <MenuItem name="3" to="/">
            <Icon type="md-apps"></Icon>
            <span>检测项目管理</span>
          </MenuItem>
        </Menu>
        <div style="width:100%;position:fixed;bottom:0;">
          <Icon
            @click.native="collapsedSider"
            :class="rotateIcon"
            :style="{margin: '0 20px'}"
            type="md-menu"
            size="24"
          ></Icon>
        </div>
      </Sider>
      <keep-alive >
            <router-view></router-view>
          </keep-alive>
    </Layout>
    
  </div>
</template>
<script>
import {Sider,Menu, MenuItem } from "iview";
import bus from '@/base/eventbus';
export default {
  data() {
    return {
      isCollapsed: false,
    };
  },
  computed: {
    rotateIcon() {
      return ["menu-icon", this.isCollapsed ? "rotate-icon" : ""];
    },
    menuitemClasses() {
      return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""];
    }
  },
  mounted(){
  },
  methods: {
    collapsedSider() {
      this.$refs.side1.toggleCollapse();
    },
    menuChange(name){
      console.log(111)
      console.log(name)
    }
  },
  components: {
    Sider,
    MenuItem,
    Menu
  }
};
</script>